<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> 
    <style>
    	table.table-hover tr{
    	cursor:pointer;
    	}
    
    </style>
<div class="row" style="margin:100px 0px;">
	
	<div class="col-xs-7" >
	<!-- 	<button class="btn btn-sm btn-info" onclick="addMainType1()"><span class="glyphicon glyphicon-plus"></span>增加角色</button> -->
		<table class="table table-hover" >
		  <a href="#" class="list-group-item active">
		    用户列表
		  </a>
		  <tbody id="mainTypeArea1" style="border-width:1px;border-style:solid;border-color:#337AB7;">
		  <tr>
		        <td>用户名</td> 
		        <td>昵称</td> 
		        <td>邮箱</td> 
		        <td>性别</td> 
		        <td>查看详情</td> 
		     </tr>
		  <c:forEach items="${users}" var="user" varStatus="st"  >
    		<tr class='trMainId1'>
    			<input type="hidden" value="${user.id}">
		        <td>${user.name}</td> 
		        <td>${user.userDetail.nickname}</td> 
		        <td>${user.userDetail.mail}</td> 
		        <td>${user.userDetail.sex}</td> 
		        <td><a><span class="glyphicon glyphicon-edit editMainType1"></span></a></td> 
		     </tr>
		</c:forEach>
	  </tbody>
	</table>
	</div>
	<div class="col-xs-5">
		<form id="formPermission">
		<table class="table table-hover" >
		<a href="#" class="list-group-item active">
		    角色列表
		  </a>
			<tbody id="mainTypeArea1" style="border-width:1px;border-style:solid;border-color:#337AB7;">
				<tr>
					<td></td>
					<td>名称</td>
					<td>描述</td>
				</tr>	
				
				<c:forEach items="${roles}" var="role">
					<tr>
						<td><input type="checkbox" name="roleId"  value="${role.id}"></td>
						<td>${role.name}</td>
						<td>${role.desc_}</td>
					</tr>	
				</c:forEach>
			</tbody>
		  </table>
		  </form>
		  <button class="btn btn-primary" onclick="updateRole()">更新</button>
	</div>
</div>
<script>
var userId = -1;
//角色点击时查询角色对应的权限信息
$("body").on("click",".trMainId1",function(){
	initRoleSelected();
	$(this).addClass("active");
	initCheck();
	userId = $(this).children().eq(0).val();
	$.ajax({
		url:"roleper_getRole_byUser",
		data:{id:userId},
		success:function(data){
			var roles = data;
			for(var i=0;i<roles.length;i++){
				var idStr = roles[i].id+"";
				addChecked(idStr);
			}
		}
	});
});
	
	//当点击更新时，获取所有的权限id，（form序列化）更新完毕之后显示更新完毕
	function updateRole(){
		var longid = $("#formPermission").serialize();
		var dataStr = "userId="+userId+"&"+longid;
		if(userId==-1){
			alert("请选择用户!");
		}else{
			$.ajax({
				url:"roleper_updateUserRole",
				type:"post",
				data:dataStr,
				success:function(data){
					alert("更新成功!")
				}
			});
		}
		
	}
	//根据输入的id，判断属于哪一个permission，并加上对应的选中
	function addChecked(idStr){
		$("input[name='roleId']").each(function(){
			if($(this).val()==idStr){
				$(this).prop("checked",true);
			}
		});
	}
	
	//清空复选框的选中状态
	function initCheck(){
		$("input[name='roleId']").each(function(){
			$(this).prop("checked",false);
		});
	}
	
	//清空角色选择栏的选中状态
	function initRoleSelected(){
		$(".trMainId1").each(function(){
			$(this).removeClass("active");
		});
	}
	

</script>